.common() {
  font-weight: 400;

  &:global(.semi-typography-link) {
    font-weight: 400;
  }

  &.typography-text-bold {
    font-weight: 900;
  }

  &.typography-type-default {
    color: var(--color-text);
  }

  &.typography-type-success {
    color: var(--color-success);
  }

  &.typography-type-info {
    color: var(--color-info);
  }

  &.typography-type-warning {
    color: var(--color-warning);
  }

  &.typography-type-error {
    color: var(--color-error);
  }

  &.typography-type-primary {
    color: var(--color-primary);
  }
}

.typography-text {
  &.typography-text-s1 {
    .common();
    font-size: 12px;
    line-height: 16px;
  }

  &.typography-text-s2 {
    .common();
    font-size: 14px;
    line-height: 20px;
  }

  &.typography-text-s3 {
    .common();
    font-size: 16px;
    line-height: 22px;
  }

  &.typography-text-s4 {
    .common();
    font-size: 18px;
    line-height: 24px;
  }

  &.typography-text-s5 {
    .common();
    font-size: 20px;
    line-height: 28px;
  }

  &.typography-text-s6 {
    .common();
    font-size: 24px;
    line-height: 32px;
  }

  &.typography-text-s7 {
    .common();
    font-size: 28px;
    line-height: 40px;
  }

  &.typography-text-s8 {
    .common();
    font-size: 32px;
    line-height: 44px;
  }
}
